import React from 'react'
import './index.css'
import { useState } from 'react'

//第八步：接收传过来的值，并给到对应的dom中
export default function Item({id,todo,done,setTodoList,todoList}) {
    //第十步：//isActive状态用来保存li的active类是否添加和按钮的display状态
    const [isActive,setIsActive]=useState(false)
    //第十二步：移出移出事件的函数
    const mouseMoveHandle = (bool)=>{
        return ()=>{
            setIsActive(bool)
        }
    }
    //第十三步：点击多选框改变state的事件函数,并给多选框绑定onchange事件
    //给每个item的复选框都绑定了事件 只要点击这个item的复选框，就会让复选框的checked的值改变 然后就会触发这个onchage事件 因为每个item都有不同的id 我只要通过这个id去找state中对应的那条数据 并修改它的state，就能在页面上展示了
    const checkChangeHandle =(e)=>{
            const newTodoList = todoList.map(item=>{
                //如果我修改的这个item的id 和原来state中的一条数据的id相等，就返回修改done之后的item，如果不相等，则直接返回原来那个item
                if(item.id===id){
                    return {...item,done:e.target.checked}
                }
                return{...item}//map回调函数中返回的值会组成一个数组，作为map返回的那个新数组
            })
            //再把state中的数据修改为得到的这个新数组 
            setTodoList(newTodoList)
    }
    //第十四步：删除事件的回调函数
    const deleteHandle =()=>{//filter 如果满足return后的条件就会被留下来 不满足就被删掉 
        const newTodoList = todoList.filter((item)=>{
            return item.id!==id
        })
        setTodoList(newTodoList)
    }
    return (
        
        // 第十一步：给li标签绑定移入移出事件，移入就设置active类名，移出就不设置
        <li className={isActive?'active':''} onMouseEnter={mouseMoveHandle(true)} onMouseLeave={mouseMoveHandle(false)}>
            <label>
                <input type="checkbox" checked={done} onChange={checkChangeHandle} />
                <span>{todo}</span>
            </label>
            <button className="btn btn-danger" onClick={deleteHandle} style={{ display:isActive?'block':'none' }}>删除</button>
        </li>
    )
}
